<template>
  <div style="padding: 7px 5px 0px 0px;">
    <FormItem
      :required="validate"
      :class="active?'active':''"
      :label="field.title"
    >
      <div class="item-wrapper">
        <i-input :placeholder="field.props.placeholder" v-if="fieldType=='input'" value></i-input>
        <Select v-else-if="fieldType=='select'" :placeholder="field.props.placeholder" value>
          <Option value>请选择</Option>
        </Select>
        <RadioGroup v-else-if="fieldType=='radio'" value="选项一">
          <Radio label="选项一"></Radio>
          <Radio label="选项二"></Radio>
          <Radio label="选项三"></Radio>
        </RadioGroup>
        <CheckboxGroup v-else-if="fieldType=='checkbox'" :value="['选项一']">
          <Checkbox label="选项一"></Checkbox>
          <Checkbox label="选项二"></Checkbox>
          <Checkbox label="选项三"></Checkbox>
        </CheckboxGroup>
        <i-switch v-else-if="fieldType=='switch'" :value="true"/>
        <Cascader
          v-else-if="fieldType=='cascader'"
          :placeholder="field.props.placeholder"
          :value="[1,2]"
        ></Cascader>
        <Rate v-else-if="fieldType=='rate'" :value="3"/>
        <DatePicker
          v-else-if="fieldType=='date'"
          :placeholder="field.props.placeholder"
          type="date"
        ></DatePicker>
        <Upload v-else-if="fieldType=='upload'" action>
          <Button icon="ios-cloud-upload-outline">上传文件</Button>
        </Upload>
        <Slider v-else-if="fieldType=='slider'" :value="50"></Slider>
        <TimePicker
          v-else-if="fieldType=='time'"
          type="time"
          :placeholder="field.props.placeholder"
        ></TimePicker>
        <treeselect
          :placeholder="field.props.placeholder"
          v-else-if="fieldType=='treeselect'"
          v-model="treeselectValue"
          :multiple="true"
          :options="options"
        />
        <AutoComplete
          v-else-if="fieldType=='autocomplete'"
          value
          :placeholder="field.props.placeholder"
        ></AutoComplete>
        <i-input v-else :placeholder="field.props.placeholder" value></i-input>
      </div>
    </FormItem>
  </div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: { Treeselect },
  props: {
    field: {},
    active: false,
    fieldType: ''
  },
  computed: {
    validate() {
      return Array.isArray(this.field.validate) &&
        this.field.validate.filter(v => {
          return Object.keys(v).includes('required') && v.required
        }).length > 0
    }
  },
  data() {
    return {
      showMessage: false,
      treeselectValue: null,
      options: [
        {
          id: 'a',
          label: 'a',
          children: [
            {
              id: 'aa',
              label: 'aa'
            },
            {
              id: 'ab',
              label: 'ab'
            }
          ]
        },
        {
          id: 'b',
          label: 'b'
        },
        {
          id: 'c',
          label: 'c'
        }
      ]
    }
  }
}
</script>
<style lang="less" scoped>
.item-wrapper {
  &::after {
    display: table;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: block;
    z-index: 1001;
    clear: both;
  }
}
.ivu-form-item {
  border: 1px dashed #d3d3d3;
  margin-bottom: 0px;
  padding: 7px 5px 0px 0px;
  height: 48px;
  //   height: 48px;
  &.active {
    background: #b3d8ff;
  }
}
</style>

